<template>
	<view class="container">
		<custom-header title="文章列表"></custom-header>
		
		<!-- 标题 -->
		<view class="title-container">
		</view>

		<!-- 列表 -->
		<view class="item-list">
			<view v-for="(item, index) in items" :key="index" class="item" @click="navigateToArticle(item)">
				<image :src=" item.image" class="item-image">
				</image>
				<text class="item-title">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [
					{
						image: 'https://file.huishouka.com.cn/static/ic_test_list_01.png',
						title: '京东外卖爆火出圈：外卖江湖再掀波澜',
						content: '近期，京东外卖以迅雷不及掩耳之势强势崛起，接连登上各大新闻热搜，引发全网热议。在美团、饿了么双雄鼎立的外卖市场，京东的入局，无疑是投下了一颗重磅炸弹。这场新老势力的碰撞，恰似京东e卡与美团卡的竞争，令人不禁思考：外卖行业格局是否将被重新改写？京东此番大举进军外卖领域，究竟是为了彻底洗牌，还是另有战略图谋？'
					},
					{
						image: 'https://file.huishouka.com.cn/static/ic_test_list_03.png',
						title: '礼赞劳动美，致敬奋斗者',
						content: '2025年五一国际劳动节以“光荣属于劳动者，幸福属于劳动者”为主题，致敬每一位用双手编织梦想、用汗水浇灌希望的奋斗者。自1889年第二国际确立五一为全球劳动者节日以来，中国始终将劳动精神融入发展血脉，从工厂车间到科研一线，从田间地头到数字云端，劳动者以平凡铸就非凡。今年，各地开展劳模表彰、技能竞赛等活动，上海汽轮机厂等企业更以技术创新诠释新时代工匠精神。劳动教育深入人心，青年一代通过实践感悟“劳动最光荣”的真谛。让我们以劳动为荣，以奋斗为桨，共绘高质量发展的壮美画卷！'
					},
					{
						image: 'https://file.huishouka.com.cn/static/ic_test_list_02.png',
						title: '共筑满意消费，守护权益每一天',
						content: '2025年“3·15”国际消费者权益日以“共筑满意消费”为主题，旨在凝聚社会力量优化消费环境，提振消费信心。消费者享有安全权、知情权、选择权等九项法定权益，如遇纠纷可先与商家协商，协商未果可拨打12315投诉或通过法律途径维权。中消协倡导保存交易凭证、关注商品质量，并呼吁企业诚信经营，共同筑牢消费安全防线。让我们携手营造公平、透明、满意的消费生态，助力经济高质量发展'
					}
				]
			};
		},
		methods:{
			navigateToArticle(item) {
				console.log("文章列表" + item)
				uni.navigateTo({
					url: `/pages/article/article?title=${encodeURIComponent(item.title)}&imageSrc=${encodeURIComponent(item.image)}&content=${encodeURIComponent(item.content)}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 文章列表
	.item-list {
		padding: 20rpx;
		width: 100%;
	}
	
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		overflow: hidden;
	}
	
	.item-image {
		width: 100%;
		height: 300rpx;
		/* 根据需要调整高度 */
		object-fit: cover;
	}
	
	.item-title {
		font-size: 28rpx;
		color: #333;
		margin: 10rpx 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.title-container {
		width: 100%;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

</style>